<template>
  <el-container>
    <el-main>
      <el-row :gutter="15">
        <el-col :span="8" :offset="0">
          <el-card shadow="never">
            <div id="personChart" style="height: 220px; width: 100%" />
            <!-- card body -->
          </el-card>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-card shadow="never">
            <div id="placeChart" style="height: 220px; width: 100%" />
            <!-- card body -->
          </el-card>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-card shadow="never">
            <div id="ageChart" style="height: 220px; width: 100%" />
            <!-- card body -->
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="8" :offset="0">
          <el-card shadow="never">
            <div id="workerTypeChart" style="height: 400px; width: 100%" />
            <!-- card body -->
          </el-card>
        </el-col>
        <el-col :span="16" :offset="0">
          <el-card shadow="never">
            <div id="analysisChart" style="height: 400px; width: 100%" />
            <!-- card body -->
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";

const initChart = () => {
  const personChart = echarts.init(document.getElementById("personChart") as HTMLDivElement);
  const placeChart = echarts.init(document.getElementById("placeChart") as HTMLDivElement);
  const ageChart = echarts.init(document.getElementById("ageChart") as HTMLDivElement);
  const workerTypeChart = echarts.init(document.getElementById("workerTypeChart") as HTMLDivElement);
  const analysisChart = echarts.init(document.getElementById("analysisChart") as HTMLDivElement);
  //项目人员类型分析
  personChart.setOption({
    title: {
      text: "项目人员类型分析",
      left: "left",
      top: "0%",
      textStyle: {
        color: "#000",
        fontSize: "14",
      },
    },
    legend: {
      orient: "vertical",
      right: "0",
      top: "35%",
      align: "right",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: [0, "75%"],
        center: ["50%", "50%"],
        data: [
          { value: 150, name: "管理人员数", itemStyle: { color: "#3198ff" } },
          { value: 100, name: "工人数", itemStyle: { color: "#68bbc4" } },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });
  //用工按归属地统计
  placeChart.setOption({
    title: {
      text: "用工按归属地统计",
      left: "left",
      top: "0%",
      textStyle: {
        color: "#000",
        fontSize: "14",
      },
    },
    grid: {
      top: "16%",
      left: "3%",
      right: "4%",
      bottom: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: ["重庆", "上海", "西藏", "青海", "广西", "浙江"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [100, 111, 150, 60, 64, 100],
        barWidth: 30,
        type: "bar",
        itemStyle: {
          color: "#3198ff",
        },
        label: {
          show: true,
          position: "top",
          color: "#3198ff",
          fontSize: 12,
        },
      },
    ],
  });
  //用工按年龄统计
  ageChart.setOption({
    title: {
      text: "用工按年龄统计",
      left: "left",
      top: "0%",
      textStyle: {
        color: "#000",
        fontSize: "14",
      },
    },
    grid: {
      top: "16%",
      left: "3%",
      right: "4%",
      bottom: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
    },
    yAxis: {
      type: "category",
      data: ["20以下", "20-30", "30-40", "40-50", "50-60", "60以上"],
    },
    series: [
      {
        data: [100, 111, 150, 60, 64, 100],
        type: "bar",
        itemStyle: {
          color: "#3198ff",
        },
        label: {
          show: true,
          position: "right",
          color: "#3198ff",
          fontSize: 12,
        },
      },
    ],
  });

  //工种分布情况
  workerTypeChart.setOption({
    title: {
      text: "工种分布情况",
      left: "left",
      top: "0%",
      textStyle: {
        color: "#000",
        fontSize: "14",
      },
    },
    legend: {
      orient: "vertical",
      right: "0",
      top: "35%",
      align: "right",
    },

    series: [
      {
        name: "Access From",
        type: "pie",
        left: "-30%",
        radius: "50%",
        data: [
          { value: 100, name: "工种1" },
          { value: 150, name: "工种2" },
          { value: 189, name: "工种3" },
          { value: 202, name: "工种4" },
          { value: 176, name: "工种5" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        label: {
          show: true,
          width: 50,
        },
      },
    ],
  });
  //用工情况分析
  analysisChart.setOption({
    title: {
      text: "用工情况分析",
      left: "left",
      top: "0%",
      textStyle: {
        color: "#000",
        fontSize: "14",
      },
    },
    grid: {
      top: "16%",
      left: "3%",
      right: "4%",
      bottom: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [100, 111, 150, 60, 64, 100, 200, 50, 169, 120, 136, 110],
        type: "bar",
        barWidth: 30,
        itemStyle: {
          color: "#3198ff",
        },
        label: {
          show: true,
          position: "top",
          color: "#3198ff",
          fontSize: 12,
        },
      },
    ],
  });

  window.addEventListener("resize", () => {
    personChart.resize();
    placeChart.resize();
    ageChart.resize();
    workerTypeChart.resize();
    analysisChart.resize();
  });
};

onMounted(() => {
  initChart();
});
</script>

<style lang="less" scoped>
:deep(.el-col) {
  padding-bottom: 15px;
}
:deep(.el-main) {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
}
:deep(.el-card) {
  border-radius: 0;
  padding-left: 5px;
  padding-right: 5px;
}
</style>
